<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创意3D坊——官方商城</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 引入bootstrap样式文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
		<!-- 引入bootstrap图标库 -->
		<link rel="stylesheet" type="text/css" href="css/shop.css"/><!-- 引入自己写的CSS样式 -->
	</head>
	<body>
		<!-- 侧边栏 -->
		<a href="index.html" class="slider-bar pl-3 text-decoration-none" id="slider-bar">
			<i class="bi bi-house-door" style="font-size: 60px;"></i>
			<p style="margin-top: -8px;">返回官网</p>
		</a>
		<!-- 导航栏 -->
		<div class="fixed-top" style="background-color: rgba(255, 255, 255, 0.8);">
			<nav class="navbar navbar-expand-xl navbar-dark">
				<div>
					<a class="navbar-brand ml-5" href="user.html"><img src="img/icon.png" width="40px" height="40px" background-repeat: no-repeat;></a>
					<div style="font-size: 20px;margin-top: -3%;margin-left: 16%;color: rgb(68, 16, 243);font-weight: bold;">3D创意坊</div>
					<ul class="nav ml-4 ">
						<li class="nav-item mr-4" data-toggle="tooltip" data-placement="bottom" data-html="true"
							data-template="<div class='tooltip' role='tooltip'><div class='tooltip-inner border-orange'></div></div>"
							title="<div class='orange'>	
										<p>Cloud 3D One 系列</p><p>3D One系列软件</p><p>等级考试·备考题库</p><p>社区VIP会员</p><p>其他</p>
								</div>"><a href="javascript:;" class="nav-link text-secondary">创客加油站<img src="img/i-new.png"></a></li>
						<li class="nav-item mr-4" data-toggle="tooltip" data-placement="bottom" data-html="true"
							data-template="<div class='tooltip' role='tooltip'><div class='tooltip-inner border-orange'></div></div>"
							title="<div class='orange'>
										<p>课程套件</p><p>永久授权开课包</p><p>其他</p>
								</div>">
							<a href="javascript:;" class="nav-link  text-secondary">开课服务包<img src="img/i-new.png"></a>
						</li>
						<li class="nav-item mr-4" data-toggle="tooltip" data-placement="bottom" data-html="true"
							data-template="<div class='tooltip' role='tooltip'><div class='tooltip-inner border-orange'></div></div>"
							title="<div class='orange'>
										<p>3C配件</p><p>模型套件</p><p>其他</p>
								</div>"><a href="javascript:;" class="nav-link text-secondary">活动套件</a></li>
						<li class="nav-item mr-4" data-toggle="tooltip" data-placement="bottom" data-html="true"
							data-template="<div class='tooltip' role='tooltip'><div class='tooltip-inner border-orange'></div></div>"
							title="<div class='orange'>
								<p>3D动画系列专区</p><p>AI机器系列专区</p><p>其他</p>
							</div>">
							<a href="javascript:;" class="nav-link  text-secondary">促销专区<img src="img/i-hot.png"></a>
						</li>
					</ul>
				</div>
				<!-- 显示折叠的按钮 -->
				<button type="button" class="btn btn-secondary navbar-toggler" data-toggle="collapse"
					data-target="#sample1"><span class="navbar-toggler-icon"></span></button>
				<!-- 折叠隐藏的部分 -->
				<div class="collapse navbar-collapse" id="sample1">
					<div class="ml-auto">
						<a class="text-decoration-none text-secondary  px-3" href="dengru.html">你好，请登录</a><a
							class="text-decoration-none text-secondary  px-3" href="javascript:;"><i class="bi bi-cart2"
								style="font-size: 25px;color: black;"></i>购物车<span class="num">0</span></a><a
							class=" px-3 text-decoration-none text-secondary" href="javascript:;" onclick="alert('当前暂无活动')"><i
								class="bi bi-clipboard-check" style="font-size: 23px;color: black;"></i>领取中心</a>
						<div class="input-group ml-3">
							<input type="text" placeholder="创意课程包" class="form-control-sm  mt-3" data-container="body"
								data-toggle="popover" data-html="true" data-placement="bottom"
								data-template='<div class="popover" role="tooltip"><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
								data-content="<div class='popover-content'>
									<p class='text-secondary'>热门搜索<img src='img/ico-hot.png'></p><p><a href='javascript:;'>未来农场盲盒</a></p><p><a href='javascript:;'>月球基地场地包</a></p><p><a href='javascript:;'>创意天梯套件</a></p><p><a href='javascript:;'>风力测试装置</a></p><p><a href='javascript:;'>极限运输套件</a></p>
								</div>" />
							<div class="input-group-append mt-3">
								<button class="btn btn-sm btn-danger" type="submit"><i
										class="bi bi-search"></i></button>
							</div>
						</div>
					</div>
				</div>
			</nav>
		</div>
		<!-- 轮播图 -->
		<div class="carousel slide carousel-fade" id="sample" data-interval="2000" data-ride="carousel"
			style="margin-top: 100px;">
			<!-- 1. 轮播的内容 -->
			<div class="carousel-inner">
				<!-- 第1页 -->
				<div class="carousel-item active">
					<img src="img/shangpinlunbo1.png" class="w-100" height="545px">
				</div>
				<!-- 第2页 -->
				<div class="carousel-item">
					<img src="img/shangpinlunbo2.png" class="w-100" height="545px">
				</div>
				<!-- 第3页 -->
				<div class="carousel-item">
					<img src="img/shangpinlunbo3.png" class="w-100" height="545px">
				</div>
				<!-- 第4页 -->
				<div class="carousel-item">
					<img src="img/shangpinlunbo4.png" class="w-100" height="545px">
				</div>
			</div>

			<!-- 2. 轮播下方指示器（可选项，一般都会使用） -->
			<ul class="carousel-indicators">
				<li data-target="#sample" data-slide-to="0" class="active"></li>
				<li data-target="#sample" data-slide-to="1"></li>
				<li data-target="#sample" data-slide-to="2"></li>
				<li data-target="#sample" data-slide-to="3"></li>
			</ul>
		</div>
		<!-- 主体内容 -->
		<div class="content">
			<!-- 四个商品 -->
			<div class="row">
				<div class="col-xl-3 col-md-6">
					<img src="img/shangpin1.png" onmousemove="move(this,'img/shangpin1b.png')"
						onmouseleave="leave(this,'img/shangpin1.png')" class="w-100">
					<p class="font-weight-bold">仿真题库（一级）*6个月<a id="addbtn" class="float-right text-danger"
							href="javascript:;">加入购物车</a></p>
				</div>
				<div class="col-xl-3 col-md-6">
					<img src="img/shangpin2.png" onmousemove="move(this,'img/shangpin2b.png')"
						onmouseleave="leave(this,'img/shangpin2.png')" class="w-100">
					<p class="font-weight-bold">社区VIP会员*24个月<a id="addbtn" class="float-right text-danger"
							href="javascript:;">加入购物车</a></p>
				</div>
				<div class="col-xl-3 col-md-6">
					<img src="img/shangpin3.png" onmousemove="move(this,'img/shangpin3b.png')"
						onmouseleave="leave(this,'img/shangpin3.png')" class="w-100">
					<p class="font-weight-bold">3D One Plus *12个月<a id="addbtn" class="float-right text-danger"
							href="javascript:;">加入购物车</a></p>
				</div>
				<div class="col-xl-3 col-md-6">
					<img src="img/shangpin4.png" onmousemove="move(this,'img/shangpin4b.png')"
						onmouseleave="leave(this,'img/shangpin4.png')" class="w-100">
					<p class="font-weight-bold">筑梦空间站*教学资源包<a id="addbtn" class="float-right text-danger"
							href="javascript:;">加入购物车</a></p>
				</div>
			</div>
			<!-- 商城服务 -->
			<div class="container mt-4">
				<div class="row">
					<div class="col-md-4">
						<p class="float-md-right"><span class="fuwu1"></span>7天无理由退换货</p>
					</div>
					<div class="col-md-4">
						<p class="offset-md-4"><span class="fuwu2"></span>100%官方正品</p>
					</div>
					<div class="col-md-4">
						<p><span class="fuwu3"></span>全场每单满299包邮</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 页尾 -->
		<div class="footer" style="background-color: rgb(246,246,246);">
			<div class="container py-3">
				<div class="row">
					<ul class="col-md-3 col-6">
						<li>购物指南</li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;账户注册与登录</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;购买流程介绍</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;支付方式</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;常见问题</a></li>
					</ul>
					<ul class="col-md-3 col-6">
						<li>配送服务</li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;全场满299元免运费</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;配送范围及运费</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;配送进度查询</a></li>
					</ul>
					<ul class="col-md-3 col-6">
						<li>售后服务</li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;7天无理由退换货</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;退换货流程</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;商品送错的处理方案</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;售后服务及投诉</a></li>
					</ul>
					<ul class="col-md-3 col-6">
						<li>服务中心</li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;在线客服查询（8:00~24:00）</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;咨询时间：工作日13:00-17:00</a></li>
						<li><a class="text-secondary text-decoration-none"
								href="javascript:;">&nbsp;&nbsp;&nbsp;售后：1758370764（QQ）</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 登录模态框 -->
	</div>
		<script>
			// 预览图片的方法 
			function move(img, url) {
				img.src = url;
			}

			function leave(img, url) {
				img.src = url;
			}

			// 加入购物车的方法
			var num = document.querySelector(".num");
			var numV = parseInt(num.textContent);
			var addbtns = document.querySelectorAll("#addbtn");
			for (var i = 0; i < addbtns.length; i++) {
				addbtns[i].onclick = function() {
					++numV;
					num.innerText = numV;
					alert("添加成功")
				}
			}
		</script>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<!-- 在页面上初始化所有提示框 -->
		<!-- 不加下方这段，不会启动提示框和弹出窗效果 -->
		<script type="text/javascript">
			$(function() {
				$('[data-toggle="tooltip"]').tooltip()
			})
			$(function() {
				$('[data-toggle="popover"]').popover()
			})
		</script>
	</body>
</html>
